﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <!-- general -->
    <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
    <!-- end general -->
    

    <script type="text/javascript">
        $(document).ready(function () {
            function lastAddedLiveFunc() {
                $('div#lastPostsLoader').html('<img src="bigLoader.gif">');

                $.get("infinite_scroll_demo5_more.html", function (data) {
                    if (data != "") {
                        //console.log('add data..');
                        $(".items").append(data);
                    }
                    $('div#lastPostsLoader').empty();
                });
            };

            //lastAddedLiveFunc();
            $(window).scroll(function () {

                var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
                var scrolltrigger = 0.95;

                if ((wintop / (docheight - winheight)) > scrolltrigger) {
                    //console.log('scroll bottom');
                    lastAddedLiveFunc();
                }
            });
        });
</script>
</head>
<body>
    <div id="header" style="position: fixed; display: block; background-color: black; color: white">I am the header</div>
    <ul class="items">
        <li>content1</li>
        <li>content2</li>
        <li>content3</li>
        <li>content4</li>
        <li>content5</li>
        <li>content6</li>
        <li>content7</li>
        <li>content8</li>
        <li>content9</li>
        <li>content10</li>
    </ul>
<div id="lastPostsLoader"></div>
    <div id="footer" style="position: fixed; display: block; bottom: 0; background-color: black; color: white">I am the footer</div>
</body>
</html>
